সিএসএস৩ ইউজার ইন্টারফেস (CSS3 User Interface)


সিএসএস(৩) ইউজার ইন্টারফেস ব্যবহৃত যেকোনো এলিমেন্টকে একজন ইউজার তার নিজের ইচ্ছামত পরিবর্তন করতে পারবে। সিএসএস(৩) তে অনেক ধরণের ইউজার ইন্টারফেস প্রোপার্টি রয়েছে। যেমন- resize, appearance, box-sizing, icon, outline-offset, nav-up, nav-down, nav-left, nav-right ইত্যাদি।

এই অধ্যায়ে আমরা ইউজার ইন্টারফেসের resize এবং outline-offset প্রোপার্টিগুলো নিয়ে আলোচনা করবোঃ


এক নজরে ইউজার ইন্টারফেস প্রোপার্টি


সিএসএস(৩) resize প্রোপার্টি

আপনার পেজের কোনো এলিমেন্টের আকার ব্যবহারকারী পরিবর্তন করতে পারবে কিনা তা নির্ধারণ করতে resize প্রোপার্টি ব্যবহার করুন।

নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র প্রস্থ পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1769

নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র উচ্চতা পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1770

নিম্নের উদাহরণে একজন ব্যবহারকারী

এলিমেন্টটির উচ্চতা এবং প্রস্থ উভয়ই পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1771


সিএসএস(৩) আউটলাইন অফসেট

একটি এলিমেন্টের বর্ডার এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করতে outline-offset প্রোপার্টি ব্যবহার করা হয়।

আউটলাইন বর্ডার থেকে তিনটি কারণে ভিন্ন হয়ঃ

  • আউটলাইন হচ্ছে এলিমেন্টের চারপাশে একটি লাইন যা বর্ডারের বাইরে অবস্থান করে।
  • আউটলাইন জায়গা দখল করে না।
  • আউটলাইন সর্বদা চতুর্ভুজ আকৃতির হয় না।

নিম্নের উদাহরণে বর্ডার এবং আউটলাইনের মাঝে ২০ পিক্সেল দূরত্ব তৈরি করার জন্য outline-offset প্রোপার্টি ব্যবহার করা হয়েছেঃ

kt_satt_skill_example_id=1772


Content added By

আরও দেখুন...

Promotion